<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>用户行为分析（总部）</title>
  <link rel="stylesheet" href="../../mobile_static/css/element.css" />
  <link rel="stylesheet" href="../../mobile_static/css/base.css" />
  <link rel="stylesheet" href="../../mobile_static/css/userBehaviorAnalysis/userBehaviorAnalysis.css" />
  <script src="../../mobile_static/js/vue.js"></script>
  <script src="../../mobile_static/js/echarts.js"></script>
  <script src="../../mobile_static/js/china.js"></script>
  <script src="../../mobile_static/js/axios.js"></script>
  <script src="../../mobile_static/js/jquery-1.10.2.min.js"></script>

</head>

<body>
  <div id="app">
    <div class="app-content">
      <div class="top-bar">
        <div class="top-bar_left">
          <ul>
            <li :class="{'selected':isLiOneSelect === 1}" @click="isLiOneSelect=1">
              昨日
            </li>
            <li :class="{'selected':isLiOneSelect === 2}" @click="isLiOneSelect=2">
              近7天
            </li>
            <li :class="{'selected':isLiOneSelect === 3}" @click="isLiOneSelect=3">
              近30天
            </li>
            <li :class="{'selected':isLiOneSelect === 4}" @click="isLiOneSelect=4">
              全年
            </li>
          </ul>
          <div class="date-box">
            <el-date-picker value-format="yyyy-MM-dd" v-model="timeValue1" @change="dateChange_one" type="daterange"
              unlink-panels range-separator="至" start-placeholder="请选择开始日期" end-placeholder="请选择结束日期">
            </el-date-picker>
          </div>
        </div>
        <div class="top-bar_right">
          <el-select v-model="value" filterable placeholder="请选择" @change="downChange">
            <el-option v-for="item in options" :key="item.g0departmentcode" :label="item.g0departmentname"
              :value="item.g0departmentcode">
            </el-option>
          </el-select>
        </div>
      </div>

      <div class="firstLine">
        <div>
          <span>登录用户总数</span>
          <div class="num" v-loading="loading1">{{toThousandNum(userLoginAllNumber)}}</div>
          <div><img src="../../mobile_static/images/computer.png" alt=""></div>
        </div>
        <div>
          <span>工作日用户数</span>
          <div class="num" v-loading="loading2">{{toThousandNum(workNumber)}}</div>
          <div><img src="../../mobile_static/images/clock.png" alt=""></div>
        </div>
        <div>
          <span>休息日用户数</span>
          <div class="num" v-loading="loading3">{{toThousandNum(restdayusernum)}}</div>
          <div><img src="../../mobile_static/images/rest.png" alt=""></div>
        </div>
      </div>

      <div id="secondLine" v-loading="loading4"></div>

      <div class="thirdLine">
        <div class="circle">
          <div class="day">
            <span class="seven">{{returnInt}}</span>
            <span>天</span>
          </div>
          <div>数据解读</div>
        </div>

        <div class="text" v-loading="loading5">
          <p>
            <span class="textNum">{{returnInt}}</span>天范围内平均活跃度最高的时段为<span
            class="textNum">{{formatTime(max_time.k0hour01)}}</span>，活跃度为<span
            class="textNum">{{max_time.k0times}}</span>人次。平均活跃度最低时段为<span
            class="textNum">{{formatTime(min_time.k0hour01)}}</span>，活跃度为<span class="textNum">{{min_time.k0times}}</span>人次。
          </p>
          <p>
            时间范围内共计<span class="textNum">{{workDate}}</span>天工作日，<span
            class="textNum">{{restDate}}</span>天休息日。工作日共计活跃用户数为<span
            class="textNum">{{workUserNum}}</span>，平均活跃度最高时段为<span
            class="textNum">{{formatTime(work_max_time)}}</span>；休息日活跃总用户数为<span
            class="textNum">{{restUserNum}}</span>，平均活跃度最高时段<span class="textNum">{{formatTime(rest_max_time)}}</span>。
          </p>
        </div>
      </div>

      <div class="fourLine">
        <div id="left" v-loading="loading6"></div>
        <!-- <div id="right"></div> -->
      </div>

      <div class="fiveLine flex middle between">
         <div>
          <div id="leftFive" v-loading="loading7"></div>
          <span class="spanOne">国产化手机占比 <span>{{phone_allNUm}}</span></span>
         </div>
        <div id="middleFive" v-loading="loading8"></div>
        <div>
          <div id="rightFive" v-loading="loading9"></div>
          <span class="ios">
            <span :class="{'I':branch == 'iOS'}" @click="branch = 'iOS';equipType = 'iPhone'">iOS</span>
            <span :class="{'I':branch == 'Android'}" @click="branch = 'Android';equipType = 'Android';">Android</span>
          </span>
        </div>
        <!-- <span class="spanTwo"><i class="i-round_top" style="background: #FA6400;"></i>Android：{{equipment_proportion[0] || 0}}%</span>
        <span class="spanThree"><i class="i-round_top" style="background: #F7B500;"></i>iPad：{{equipment_proportion[1] || 0}}%</span>
        <span class="spanFour"><i class="i-round_top" style="background: #B620E0;"></i>iPhone：{{equipment_proportion[2] || 0}}%</span>
        <span class="spanFive" v-show="equipment_proportion[3]"><i class="i-round_top" style="background: #2FC25B;"></i>其他：{{equipment_proportion[3] || 0}}%</span> -->
        <!-- <span class="spanSeven"><i class="i-round_top"
            style="background: #FA6400;"></i>{{branch}}13：{{equipment_arr[0].percentage.toFixed(2)}}%</span>
        <span class="spanEight"><i class="i-round_top"
            style="background: #F7B500;"></i>{{branch}}12：{{equipment_arr[1].percentage.toFixed(2)}}%</span>
        <span class="spanNine"><i class="i-round_top"
            style="background: #B620E0;"></i>{{branch}}11：{{equipment_arr[2].percentage.toFixed(2)}}%</span>
        <span class="spanTen"><i class="i-round_top"
            style="background: #2FC25B;"></i>{{branch}}10及以下：{{equipment_arr[3].percentage.toFixed(2)}}%</span> -->
      </div>

      <div class="top-bar topBar search-box-list">
        <h2>应用访问明细表</h2>
        <section>
          <div class="top-bar_left">
            <ul>
              <li :class="{'selected':isLiTwoSelect === 1}" @click="isLiTwoSelect=1">
                近7天
              </li>
              <li :class="{'selected':isLiTwoSelect === 2}" @click="isLiTwoSelect=2">
                近30天
              </li>
              <li :class="{'selected':isLiTwoSelect === 3}" @click="isLiTwoSelect=3">
                全年
              </li>
            </ul>
            <div class="date-box">
              <el-date-picker value-format="yyyy-MM-dd" v-model="timeValue2" @change="dateChange" type="daterange"
                unlink-panels range-separator="至" start-placeholder="请选择开始日期" end-placeholder="请选择结束日期">
              </el-date-picker>
            </div>
            <el-input class="ml10" prefix-icon="el-icon-search" placeholder="按应用名搜索" v-model="input4"
                @change="search">
              <el-button slot="append" icon="el-icon-search" @click="RequestedVisitsPV" style="visibility: hidden;">
              </el-button>
            </el-input>
          </div>
        </section>
      </div>

      <div class="sixLine">
        <el-table :data="tableData" style="width: 100%" v-loading="loading" height="400" border
        :header-cell-style="{background: 'linear-gradient(180deg, #FAFAFA 0%, #F1F1F1 100%)',color:'#3E3F42',fontWeight:'bold'}">
          <el-table-column prop="g0mdulename" label="工作台应用名称" min-width="180">
          </el-table-column>
          <el-table-column prop="g0app_type_desc" label="APP类型" min-width="120">
          </el-table-column>
          <el-table-column prop="g0userid" label="登录账号" min-width="180"> </el-table-column>
          <el-table-column prop="g0username" label="用户姓名" min-width="100"> </el-table-column>
          <el-table-column prop="g0full_department_name" show-overflow-tooltip label="所属企业" min-width="200"> </el-table-column>
          <el-table-column prop="g0accessdate" label="访问日期" min-width="100"> </el-table-column>
          <el-table-column prop="k0visit_cnt" label="访问次数" min-width="100"> </el-table-column>
        </el-table>
      </div>

      <div class="sevenLine">
        <!-- <div class="sevenText" style="visibility:hidden">总共{{length}}条数据</div> -->
        <div>
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="thisPage"
            :page-sizes="[10, 20, 40, 100]" :page-size="size" layout="total, sizes, prev, pager, next, jumper"
            :total="length">
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</body>

</html>
<script src="../../mobile_static/js/element.js"></script>
<script type="module">
  // import {
  //   chartThree,
  // } from "../../mobile_static/options/enterprise.js";
  import { postFourRequest, postOneId, getOneIdDownload, RequestJurisdictionAll, checkAllAuth } from '../../mobile_static/axios/axios.config.js'
  import { thousandFilter } from '../../mobile_static/tool/formatFiltering.js';
  new Vue({
    el: "#app",
    data() {
      return {
        loading: false,
        initstartDate1: "",
        initendDate1: "",
        initstartDate2: "",
        initendDate2: "",
        branch: 'iOS',
        equipType: "iPhone",
        isLiOneSelect: 2,
        isLiTwoSelect: 1,
        input3: "",
        input4: "",
        tableData: [
          {
            date: "2016-05-02",
            name: "王小虎",
            address: "上海市普陀区金沙江路 1518 弄",
          },
          {
            date: "2016-05-04",
            name: "王小虎",
            address: "上海市普陀区金沙江路 1517 弄",
          },
          {
            date: "2016-05-01",
            name: "王小虎",
            address: "上海市普陀区金沙江路 1519 弄",
          },
          {
            date: "2016-05-03",
            name: "王小虎",
            address: "上海市普陀区金沙江路 1516 弄",
          },
        ],
        currentPage4: "1", //表格当前页
        echartsArr: {
          firstEcharts: "",
          secondEcharts: "",
          thirdEcharts: "",
          fourthEcharts: "",
          fifthEcharts: "",
          sixthEcharts: "",
          seventhEcharts: "",
          eighthEcharts: "",
          ninthEcharts: "",
        },
        timeValue1: "", //日期value值
        timeValue2: "", //日期value值
        options: [
          {
            value: "选项1",
            label: "全部",
          },
          {
            value: "选项2",
            label: "企业",
          },
        ],
        value: "",
        startDate: "",
        endDate: "",
        userLoginAllNumber: "",
        workNumber: "",
        restdayusernum: "",
        Active_trend: [],
        min_time: {
          k0hour01: "", k0times: ""
        },
        max_time: {
          k0hour01: "", k0times: ""
        },
        workDate: "",
        restDate: "",
        workUserNum: "",
        restUserNum: "",
        work_max_time: "",
        rest_max_time: "",
        frequency_count: [],
        frequency_num: [],
        phone_brand: [],
        phone_allNUm: '',
        equipment_type: [],
        equipment_proportion: [0, 0, 0],

        startDate2: "",
        endDate2: "",
        size: 10,
        thisPage: 1,
        length: "",
        equipment_num: "",
        equipment_arr: [
          { value: 0, percentage: 0 }, { value: 0, percentage: 0 }, { value: 0, percentage: 0 }, { value: 0, percentage: 0 }
        ],
        token: "",
        returnInt: "",
        loading1: false,
        loading2: false,
        loading3: false,
        loading4: false,
        loading5: false,
        loading6: false,
        loading7: false,
        loading8: false,
        loading9: false,
      };
    },
    created() {
      //进入页面获取token做请求
      if (window.location.search) {
        this.token = window.location.search.slice(1).split("=")[1]
      } else {
        alert("页面访问失败")
        window.location.href = '../error/error.html'
      }
      this.timeValue1 = []

      let nowDate = new Date();
      this.endDate = `${nowDate.getFullYear()}-${this.ZeroComplement(nowDate.getMonth() + 1)}-${this.ZeroComplement(nowDate.getDate())}`
      this.endDate2 = `${nowDate.getFullYear()}-${this.ZeroComplement(nowDate.getMonth() + 1)}-${this.ZeroComplement(nowDate.getDate())}`
      this.initendDate2 = `${nowDate.getFullYear()}-${this.ZeroComplement(nowDate.getMonth() + 1)}-${this.ZeroComplement(nowDate.getDate())}`
      this.initendDate1 = `${nowDate.getFullYear()}-${this.ZeroComplement(nowDate.getMonth() + 1)}-${this.ZeroComplement(nowDate.getDate())}`
      let date1 = new Date();
      //今天时间
      let time1 = date1.getFullYear() + "-" + this.ZeroComplement(date1.getMonth() + 1) + "-" + this.ZeroComplement(date1.getDate())
      let date2 = new Date(date1);
      let date3 = new Date(date1);
      date2.setDate(date1.getDate() + -6);
      date3.setDate(date1.getDate() + -14);
      //num是正数表示之后的时间，num负数表示之前的时间，0表示今天
      let time2 = date2.getFullYear() + "-" + this.ZeroComplement(date2.getMonth() + 1) + "-" + this.ZeroComplement(date2.getDate());
      let time3 = date3.getFullYear() + "-" + this.ZeroComplement(date3.getMonth() + 1) + "-" + this.ZeroComplement(date3.getDate());
      this.startDate = time2
      this.startDate2 = time2
      this.initstartDate2 = time2
      this.initstartDate1 = time2
      this.returnInt = this.datedifference(this.startDate, this.endDate)
      checkAllAuth({
        identityToken: this.token,
        platformFlag: '1'
      }).then(res => {
        const response = JSON.parse(res.data.msg)
        if (response.status === '1') {
            // 携带token做请求
            RequestJurisdictionAll({
              identityToken: this.token,
              platformFlag: 1
            }).then(res => {
            if (res.data.code == 200) {
              res = JSON.parse(res.data.msg);
              // console.log(res);
              this.options = res.data
              this.value = this.options[0].g0departmentcode
              this.RequestLoginAllNumber()
              this.RequestWorkNumber()
              this.RequestNoWorkNumber()
              this.RequestActiveTrend()
              this.RequestMinimumPeriod()
              this.DomesticMobilePhone()
              this.RequestMaximumPeriod()
              this.RequestWorkAndRest()
              this.RequestWorkAndRestUser()
              this.RequestWorkMaxTime()
              this.RequestRestMaxTime()
              this.RequestFrequencyCount()
              this.RequestMobilePhoneBrand()
              this.RequestEquipmentType()
              this.RequestSystemVersion()
              this.RequestedVisitsPV()
            } else {
              alert("token失效")
              window.location.href = '../error/error.html'
            }
          })
        } else {
          alert("没有访问权限")
          window.location.href = '../error/error.html'
        }
      })
    },
    mounted() {
      // this.initEcharts();

      setTimeout(() => {
        window.onresize = () => {
          this.echartsArr.firstEcharts.resize();
          this.echartsArr.secondEcharts.resize();
          // this.echartsArr.thirdEcharts.resize();
          this.echartsArr.fourthEcharts.resize();
          this.echartsArr.fifthEcharts.resize();
          this.echartsArr.sixthEcharts.resize();
          // this.echartsArr.seventhEcharts.resize();
          // this.echartsArr.eighthEcharts.resize();
          // this.echartsArr.ninthEcharts.resize();
        }
      }, 200)
      $(window.parent.document).find("iframe").load(function () {
        var main = $(window.parent.document).find("iframe");
        var mainheight = $(document).height() + 30;
        main.height(document.querySelector('html').style.height.slice(0, -2) * 1);
      });
    },
    watch: {
      //针对日期改变做监听
      isLiTwoSelect(val) {
        this.thisPage = 1
        let nowDate = new Date();
        this.endDate2 = `${nowDate.getFullYear()}-${this.ZeroComplement(nowDate.getMonth() + 1)}-${this.ZeroComplement(nowDate.getDate())}`

        if (val === 1) {
          this.timeValue2 = []
          var date1 = new Date();
          //今天时间
          var time1 = date1.getFullYear() + "-" + this.ZeroComplement(date1.getMonth() + 1) + "-" + this.ZeroComplement(date1.getDate())
          var date2 = new Date(date1);
          date2.setDate(date1.getDate() + -7);
          //num是正数表示之后的时间，num负数表示之前的时间，0表示今天
          var time2 = date2.getFullYear() + "-" + this.ZeroComplement(date2.getMonth() + 1) + "-" + this.ZeroComplement(date2.getDate());
          this.startDate2 = time2
        } else if (val === 2) {
          this.timeValue2 = []
          let day_30 = new Date().setMonth((new Date().getMonth() - 1));    //日期是30天前的对应时间戳
          day_30 = new Date(day_30);       //转换成标准时间
          let y = day_30.getFullYear();    //年
          let m = day_30.getMonth() + 1;    //月
          let d = day_30.getDate();        //日
          if (m < 10) {
            m = '0' + m;
          }
          if (d < 10) {
            d = '0' + d;
          }
          day_30 = y + '-' + m + '-' + d;    //日期是30天前的对应字符串 xxxx-xx-xx　
          this.startDate2 = day_30
        } else if (val === 3) {
          this.timeValue2 = []
          this.startDate2 = nowDate.getFullYear() + "-01-01"
        } else if (val === 5) {
          if (this.timeValue2 == null) {
            this.isLiTwoSelect = 1
            this.startDate2 = this.initstartDate2
            this.endDate2 = this.initendDate2
          } else {
            this.startDate2 = this.timeValue2[0]
            this.endDate2 = this.timeValue2[1]
          }
        }
        this.returnInt = this.datedifference(this.startDate, this.endDate)
        this.RequestedVisitsPV()
      },
      branch(val) {
        this.RequestSystemVersion()
      },
      isLiOneSelect(val) {
        let nowDate = new Date();
        this.endDate = `${nowDate.getFullYear()}-${this.ZeroComplement(nowDate.getMonth() + 1)}-${this.ZeroComplement(nowDate.getDate())}`
        if (val === 1) {
          this.timeValue1 = []
          if (nowDate.getDate() == 1) {
            if (nowDate.getMonth() == 1 || 3 || 5 || 7 || 8 || 10 || 12) {
              this.startDate = `${nowDate.getFullYear()}-${this.ZeroComplement(nowDate.getMonth() + 1)}-31`
              this.endDate = `${nowDate.getFullYear()}-${this.ZeroComplement(nowDate.getMonth() + 1)}-31`
            } else if (nowDate.getFullYear() == 4 || 6 || 9 || 11) {
              this.startDate = `${nowDate.getFullYear()}-${this.ZeroComplement(nowDate.getMonth() + 1)}-30`
              this.endDate = `${nowDate.getFullYear()}-${this.ZeroComplement(nowDate.getMonth() + 1)}-30`
            } else {
              this.startDate = `${nowDate.getFullYear()}-${this.ZeroComplement(nowDate.getMonth() + 1)}-28`
              this.endDate = `${nowDate.getFullYear()}-${this.ZeroComplement(nowDate.getMonth() + 1)}-28`
            }
          } else {
            this.startDate = `${nowDate.getFullYear()}-${this.ZeroComplement(nowDate.getMonth() + 1)}-${this.ZeroComplement(nowDate.getDate() - 1)}`
            this.endDate = `${nowDate.getFullYear()}-${this.ZeroComplement(nowDate.getMonth() + 1)}-${this.ZeroComplement(nowDate.getDate() - 1)}`
          }
        } else if (val === 2) {
          this.timeValue1 = []
          let date1 = new Date();
          //今天时间
          let time1 = date1.getFullYear() + "-" + this.ZeroComplement(date1.getMonth() + 1) + "-" + this.ZeroComplement(date1.getDate())
          let date2 = new Date(date1);
          date2.setDate(date1.getDate() + -6);
          //num是正数表示之后的时间，num负数表示之前的时间，0表示今天
          let time2 = date2.getFullYear() + "-" + this.ZeroComplement(date2.getMonth() + 1) + "-" + this.ZeroComplement(date2.getDate());
          this.startDate = time2
        } else if (val === 3) {
          this.timeValue1 = []
          // let day_30 = new Date().setMonth((new Date().getMonth() - 1));    //日期是30天前的对应时间戳
          // day_30 = new Date(day_30);       //转换成标准时间
          // let y = day_30.getFullYear();    //年
          // let m = day_30.getMonth() + 1;    //月
          // let d = day_30.getDate();        //日
          // if (m < 10) {
          //   m = '0' + m;
          // }
          // if (d < 10) {
          //   d = '0' + d;
          // }
          // day_30 = y + '-' + m + '-' + d;    //日期是30天前的对应字符串 xxxx-xx-xx
          let thirtyDays = new Date(new Date().toLocaleDateString()).getTime() - 29 * 3600 * 24 * 1000; //最近30天
          this.startDate = new Date(parseInt(thirtyDays)).getFullYear() + "-" + this.ZeroComplement(new Date(parseInt(thirtyDays)).getMonth() + 1) + "-" + this.ZeroComplement(new Date(parseInt(thirtyDays)).getDate());

        } else if (val === 4) {
          this.timeValue1 = []
          this.startDate = nowDate.getFullYear() + "-01-01"
        } 
        // else if (val === 5) {
        //   if (this.timeValue1 == null) {
        //     this.isLiTwoSelect = 1
        //     this.startDate = this.initstartDate1
        //     this.endDate = this.initendDate1
        //   } else {
        //     this.startDate = this.timeValue1[0]
        //     this.endDate = this.timeValue1[1]
        //   }
        // }
       if (val) {
        this.RequestLoginAllNumber()
        this.RequestWorkNumber()
        this.RequestNoWorkNumber()
        this.RequestActiveTrend()
        this.RequestMinimumPeriod()
        this.RequestMaximumPeriod()
        this.RequestWorkAndRest()
        this.RequestWorkAndRestUser()
        this.RequestWorkMaxTime()
        this.RequestRestMaxTime()
        this.RequestFrequencyCount()
        this.RequestMobilePhoneBrand()
        this.RequestEquipmentType()
        this.RequestSystemVersion()
        this.DomesticMobilePhone()
        this.returnInt = this.datedifference(this.startDate, this.endDate)
       }
      }
    },
    methods: {
      // 格式化返回时间
      formatTime(time) {
        return time ? time.replace(/：/g, ':') : ''
      },
      // 转化为千分位数字
      toThousandNum(num) {
        return thousandFilter(num)
      },
      datedifference(sDate1, sDate2) {    //sDate1和sDate2是2006-12-18格式  
        var dateSpan,
          tempDate,
          iDays;
        sDate1 = Date.parse(sDate1);
        sDate2 = Date.parse(sDate2);
        dateSpan = sDate2 - sDate1;
        dateSpan = Math.abs(dateSpan);
        iDays = Math.floor(dateSpan / (24 * 3600 * 1000));
        return iDays + 1
      },
      initEcharts() {
        let chartThreeDom = document.getElementById("right");
        this.echartsArr.thirdEcharts = echarts.init(chartThreeDom);
        chartThree && this.echartsArr.thirdEcharts.setOption(chartThree);
      },
      search() {
        this.thisPage = 1
        this.RequestedVisitsPV()
      },
      //顶部日期改变
      dateChange_one() {
        this.isLiOneSelect = 0
        if (this.timeValue1 == null) {
          this.isLiOneSelect = 2
          this.startDate = this.initstartDate1
          this.endDate = this.initendDate1
        } else {
          this.startDate = this.timeValue1[0]
          this.endDate = this.timeValue1[1]
        }
        this.returnInt = this.datedifference(this.startDate, this.endDate)
        this.RequestLoginAllNumber()
        this.RequestWorkNumber()
        this.RequestNoWorkNumber()
        this.RequestActiveTrend()
        this.RequestMinimumPeriod()
        this.RequestMaximumPeriod()
        this.RequestWorkAndRest()
        this.RequestWorkAndRestUser()
        this.RequestWorkMaxTime()
        this.RequestRestMaxTime()
        this.RequestFrequencyCount()
        this.RequestMobilePhoneBrand()
        this.RequestEquipmentType()
        this.RequestSystemVersion()
        this.DomesticMobilePhone()
      },
      //顶部下拉改变调用
      downChange() {
        this.RequestLoginAllNumber()
        this.RequestWorkNumber()
        this.RequestNoWorkNumber()
        this.RequestActiveTrend()
        this.RequestMinimumPeriod()
        this.RequestMaximumPeriod()
        this.RequestWorkAndRest()
        this.RequestWorkAndRestUser()
        this.RequestWorkMaxTime()
        this.RequestRestMaxTime()
        this.RequestFrequencyCount()
        this.RequestMobilePhoneBrand()
        this.RequestEquipmentType()
        this.RequestSystemVersion()
        this.RequestedVisitsPV()
        this.DomesticMobilePhone()
      },
      //请求用户登陆总数
      RequestLoginAllNumber() {
        this.loading1 = true
        postFourRequest("flyhzs00", {
          pageSize: 100,
          pageNum: 1,
          startDate: this.startDate,
          endDate: this.endDate,
          g0enterpriseCode: this.value,
        }).then(res => {
          if (!res) {
            return
          }
          this.loading1 = false
          res = JSON.parse(res.data.msg);
          // console.log(res,请求用户登陆总数);
          if (res.total == 0) {
            this.userLoginAllNumber = 0
          } else {
            this.userLoginAllNumber = res.data[0].k0loginusernum
          }

        })
      },
      //请求工作日用户数
      RequestWorkNumber() {
        this.loading2 = true
        postFourRequest("gzryhzs00", {
          pageSize: 100,
          pageNum: 1,
          startDate: this.startDate,
          endDate: this.endDate,
          g0enterpriseCode: this.value,
        }).then(res => {
          if (!res) {
            return
          }
          this.loading2 = false
          res = JSON.parse(res.data.msg);
          // console.log(res,"请求工作日用户数");
          if (res.total == 0) {
            this.workNumber = 0
          } else {
            this.workNumber = res.data[0].workdayusernum
          }

        })
      },
      //请求休息日用户数
      RequestNoWorkNumber() {
        this.loading3 = true
        postFourRequest("xxryhzs00", {
          pageSize: 100,
          pageNum: 1,
          startDate: this.startDate,
          endDate: this.endDate,
          g0enterpriseCode: this.value,
        }).then(res => {
          if (!res) {
            return
          }
          this.loading3 = false
          res = JSON.parse(res.data.msg);
          // console.log(res,"请求休息日用户数");
          if (res.total == 0) {
            this.restdayusernum = 0
          } else {
            this.restdayusernum = res.data[0].restdayusernum
          }

        })
      },
      //请求活跃时趋势
      RequestActiveTrend() {
        this.loading4 = true
        postFourRequest("hysdqs00", {
          pageSize: 100,
          pageNum: 1,
          startDate: this.startDate,
          endDate: this.endDate,
          g0enterpriseCode: this.value,
        }).then(res => {
          if (!res) {
            return
          }
          this.loading4 = false
          res = JSON.parse(res.data.msg);
          // console.log(res, "请求活跃时趋势");
          let valuearr = []
          for (var i in res.data[0]) {
            valuearr.push(res.data[0][i])
          }

          let chartOneDom = document.getElementById("secondLine");
          this.echartsArr.firstEcharts = echarts.init(chartOneDom);
          this.echartsArr.firstEcharts.setOption({
            title: {
              text: "活跃时段趋势",
              left: 20,
              textStyle: {
                color: "#4583D6",
                fontSize: 18,
                fontWeight: "bold",
              },
            },
            grid: {
              left: "10%", // 与容器左侧的距离
              right: "10%", // 与容器右侧的距离
              top: "20%", // 与容器顶部的距离
              bottom: "15%", // 与容器底部的距离
            },
            xAxis: {
              type: "category",
              data: [
                "0:00-3:00",
                "3:00-6:00",
                "6:00-9:00",
                "9:00-12:00",
                "12:00-15:00",
                "15:00-18:00",
                "18:00-21:00",
                "21:00-24:00",
              ],
            },
            yAxis: {
              type: "value",
              axisLine: {
                show: false,
              },
              axisTick: {
                show: false //y轴坐标点消失
              },
            },
            tooltip: {
              trigger: 'axis',
              formatter: '{b}<br>登录(人次)：{c}'
            },
            series: [
              {
                data: [valuearr[0], valuearr[1], valuearr[2], valuearr[3], valuearr[4], valuearr[5], valuearr[6], valuearr[7]],
                type: "line",
                symbol: "none",
                lineStyle: {
                  normal: {
                    color: "cornflowerblue" //连线颜色
                  }
                }
              }
            ]
          })
        })
      },
      handleNoDataStyle(dom) {
        dom.innerHTML = '暂无数据'
        dom.style.cssText = 'text-align:center; color: #999; border: none;line-height: 400px;font-size:18px;'
        dom.removeAttribute('_echarts_instance_')
      },
      //请求七天解读最小时段
      RequestMinimumPeriod() {
        postFourRequest("qtsjjd_zxdsd00", {
          pageSize: 100,
          pageNum: 1,
          startDate: this.startDate,
          endDate: this.endDate,
          g0enterpriseCode: this.value,
        }).then(res => {
          if (!res) {
            return
          }
          res = JSON.parse(res.data.msg);
          // console.log(res, "请求七天解读最小时段");
          if (res.total == 0) {
            this.min_time.k0hour01 = 0
            this.min_time.k0times = 0
          } else {
            this.min_time.k0hour01 = res.data[0].k0hour01
            this.min_time.k0times = res.data[0].k0times
          }
        })
      },
      //请求七天解读最大时段
      RequestMaximumPeriod() {
        postFourRequest("qtsjjd_zddsd00", {
          pageSize: 100,
          pageNum: 1,
          startDate: this.startDate,
          endDate: this.endDate,
          g0enterpriseCode: this.value,
        }).then(res => {
          if (!res) {
            return
          }
          res = JSON.parse(res.data.msg);
          // console.log(res, "请求七天解读最大时段");
          if (res.total == 0) {
            this.max_time.k0hour01 = 0
            this.max_time.k0times = 0
          } else {
            this.max_time.k0hour01 = res.data[0].k0hour01
            this.max_time.k0times = res.data[0].k0times
          }
        })
      },
      //请求工作天数、休息天数
      RequestWorkAndRest() {
        postFourRequest("qtsjjd_gzrtsxxrts00", {
          pageSize: 100,
          pageNum: 1,
          startDate: this.startDate,
          endDate: this.endDate,
          g0enterpriseCode: this.value,
        }).then(res => {
          if (!res) {
            return
          }
          res = JSON.parse(res.data.msg);
          // console.log(res, "请求工作天数、休息天数");
          if (res.total == 0) {
            this.workDate = 0
            this.restDate = 0
          } else {
            this.workDate = res.data[0].k0daycount
            this.restDate = res.data[1].k0daycount
          }
        })
      },
      //请求工作日、休息日活跃用户数
      RequestWorkAndRestUser() {
        postFourRequest("qtsjjd_gzrxxrhyyhs00", {
          pageSize: 100,
          pageNum: 1,
          startDate: this.startDate,
          endDate: this.endDate,
          g0enterpriseCode: this.value,
        }).then(res => {
          if (!res) {
            return
          }
          res = JSON.parse(res.data.msg);
          // console.log(res, "请求工作日、休息日活跃用户数");
          if (res.total == 0) {
            this.workUserNum = 0
            this.restUserNum = 0
          } else {
            if (res.data.length == 2) {
              this.workUserNum = res.data[0].k0uvnum
              this.restUserNum = res.data[1].k0uvnum
            } else {
              this.workUserNum = res.data[0].k0uvnum
              this.restUserNum = 0
            }
          }
        })
      },
      //请求工作日最大时段
      RequestWorkMaxTime() {
        postFourRequest("qtsjjd_gzrzddsd00", {
          pageSize: 100,
          pageNum: 1,
          startDate: this.startDate,
          endDate: this.endDate,
          g0enterpriseCode: this.value,
        }).then(res => {
          if (!res) {
            return
          }
          res = JSON.parse(res.data.msg);
          // console.log(res, "请求工作日最大时段");
          if (res.total == 0) {
            this.work_max_time = 0
          } else {
            this.work_max_time = res.data[0].k0hour01
          }

        })
      },
      //请求休息日最大时段
      RequestRestMaxTime() {
        this.loading5 = true
        postFourRequest("qtsjjd_xxrzddsd00", {
          pageSize: 100,
          pageNum: 1,
          startDate: this.startDate,
          endDate: this.endDate,
          g0enterpriseCode: this.value,
        }).then(res => {
          if (!res) {
            return
          }
          this.loading5 = false
          res = JSON.parse(res.data.msg);
          // console.log(res, "请求休息日最大时段");
          if (res.total == 0) {
            this.rest_max_time = 0
          } else {
            this.rest_max_time = res.data[0].k0hour01
          }

        })
      },
      //请求使用频率统计
      RequestFrequencyCount() {
        this.loading6 = true
        postFourRequest("sypltj00", {
          pageSize: 100,
          pageNum: 1,
          startDate: this.startDate,
          endDate: this.endDate,
          g0enterpriseCode: this.value,
        }).then(res => {
          if (!res) {
            return
          }
          this.loading6 = false
          res = JSON.parse(res.data.msg);
          // console.log(res, "请求使用频率统计");
          if (res.total == 0) {
            this.frequency_count = []
            this.frequency_num = []
          } else {
            this.frequency_count = []
            this.frequency_num = []
            for (let i = 0; i < res.data.length; i++) {
              if (res.data[i].g0mark == null) {
                this.frequency_count = []
                this.frequency_num = []
              } else {
                this.frequency_count.push(res.data[i].g0mark)
                this.frequency_num.push(res.data[i].k0person)
              }

            }
          }

          let chartTwoDom = document.getElementById("left");
          this.echartsArr.secondEcharts = echarts.init(chartTwoDom);
          this.echartsArr.secondEcharts.setOption({
            title: {
              text: "使用频率统计",
              left: 20,
              textStyle: {
                color: "#4583D6",
                fontSize: 18,
                fontWeight: "bold",
              },
            },
            tooltip: {
              trigger: "item",
            },
            xAxis: {
              type: "category",
              data: this.frequency_count,
              // axisLabel: {
              //   interval: 0,
              //   rotate: "45"
              // }
            },
            yAxis: {
              type: "value",
              axisLine: {
                show: false,
              },
            },
            series: [
              {
                data: this.frequency_num,
                type: "bar",
                // barMinHeight:2,
                itemStyle: {
                  color: "#2FC25B",
                },
                label: {
                  show:true,
                  position: 'top'
                },
                barWidth: 40, // 柱形的宽度
                barCategoryGap: "20%", // 柱形的间距
              }
            ]
          })
        })
      },
      //请求手机品牌分布
      RequestMobilePhoneBrand() {
        this.loading7 = true
        postFourRequest("sjppfb00", {
          pageSize: 100,
          pageNum: 1,
          startDate: this.startDate,
          endDate: this.endDate,
          g0enterpriseCode: this.value,
        }).then(res => {
          if (!res) {
            return
          }
          this.loading7 = false
          res = JSON.parse(res.data.msg);
          // console.log(res, "请求手机品牌分布");
          let totalAllNum = 0
          if (res.total == 0) {
            totalAllNum = 0
            this.phone_brand = [{ value: 0, name: '国产' }, { value: 0, name: 'iphone' }, { value: 0, name: '小米' }, { value: 0, name: '三星' },]
          } else {
            this.phone_brand = []
            for (let i = 0; i < res.data.length; i++) {
              this.phone_brand.push({ value: res.data[i].k0num, name: res.data[i].g0new_firm, percent: res.data[i].k0percentnum })
            }
            totalAllNum = res.data[0].k0totals
          }



          let chartFourDom = document.getElementById("leftFive")
          this.echartsArr.fourthEcharts = echarts.init(chartFourDom);
          this.echartsArr.fourthEcharts.setOption({
            title: {
              text: "手机品牌分布",
              left: "left",
              textStyle: {
                color: "#3E3F42",
                fontSize: 18,
                fontWeight: "bold",
              },
            },
            tooltip: {
              trigger: "item",
              formatter: "{b} : {c} ({d}%)"
            },
            legend: {
              top: 'middle',
              right: 10,
              orient: 'vertical',
              itemGap: 3,
              itemWidth: 6,
              itemHeight: 6,
              icon: 'circle',
              formatter: name => {
                for (const v of this.phone_brand) {
                  if (v.name === name) {
                    return name + '：' + v.percent
                  }
                }
              }
            },
            color: ["#FACC14", "#F04864", "#8543E0", "#1890FF", "#13C2C2", "#2FC25B", '#f00', '#ff0', '#fcf', '#0ff', '#00f', '#0f0', '#f0c', '#000', '#ccc'],
            series: [
              {
                itemStyle: {
                  borderRadius: 10,
                  borderColor: "#fff",
                  borderWidth: 2,
                },
                showEmptyCircle: false,
                label: {
                  normal: {
                    show: true,
                    position: "center",
                    color: "#4c4a4a",
                    formatter: "{total|" + "设备" + "\n\r" + totalAllNum + "台" + "}",
                    rich: {
                      total: {
                        fontSize: 12,
                        fontFamily: "微软雅黑",
                        color: "#454c5c",
                      },
                      active: {
                        fontFamily: "微软雅黑",
                        fontSize: 28,
                        color: "#000",
                        lineHeight: 30,
                      },
                    },
                  },
                },
                type: "pie",
                radius: ["40%", "50%"],
                center: ["35%", "50%"],
                data: this.phone_brand,
                emphasis: {
                  itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: "rgba(0, 0, 0, 0.5)",
                  }
                }
              }
            ]
          })
        })
      },
      //请求国产手机占比
      DomesticMobilePhone() {
        postFourRequest("gchsjzb00", {
          pageSize: 100,
          pageNum: 1,
          startDate: this.startDate,
          endDate: this.endDate,
          g0enterpriseCode: this.value,
        }).then(res => {
          if (!res) {
            return
          }
          res = JSON.parse(res.data.msg);
          if (res.total) {
            this.phone_allNUm = res.data[0].k0maid_chinapercentnum
          } else {
            this.phone_allNUm = 0
          }
        })
      },
      //请求设备类型分布
      RequestEquipmentType() {
        this.loading8 = true
        postFourRequest("sblxfb00", {
          pageSize: 100,
          pageNum: 1,
          startDate: this.startDate,
          endDate: this.endDate,
          // g0equipType: this.branch,
          g0enterpriseCode: this.value,
        }).then(res => {
          if (!res) {
            return
          }
          this.loading8 = false
          res = JSON.parse(res.data.msg);
          // console.log(res, "请求设备类型分布");
          let totalAllNum = 0
          if (res.total == 0) {
            totalAllNum = 0
            this.equipment_proportion = [0, 0, 0]
            this.equipment_type = [{
              name: "Android", value: 0
            }, {
              name: "iPad", value: 0
            }, {
              name: "iPhone", value: 0
            }, {
              name: "其他", value: 0
            },]
          } else {
            this.equipment_proportion = []
            this.equipment_type = []
            for (let i = 0; i < res.data.length; i++) {
              let len = res.data[i].k0percentnum.length
              this.equipment_proportion.push(res.data[i].k0percentnum.slice(0, len - 1) * 1)
              this.equipment_type.push({ value: res.data[i].k0num, name: res.data[i].g0equiptype, percent: res.data[i].k0percentnum })
              totalAllNum = res.data[0].k0totals
            }
          }

          let chartFiveDom = document.getElementById("middleFive");
          this.echartsArr.fifthEcharts = echarts.init(chartFiveDom);
          this.echartsArr.fifthEcharts.setOption({
            tooltip: {
              trigger: "item",
            },
            title: {
              text: "设备类型分布",
              left: "left",
              textStyle: {
                color: "#3E3F42",
                fontSize: 18,
                fontWeight: "bold",
              },
            },
            legend: {
              top: 'bottom',
              icon: 'circle',
              itemWidth: 6,
              itemHeight: 6,
              width: 250,
              formatter: name => {
                for (const v of this.equipment_type) {
                  if (v.name === name) {
                    return name + '：' + parseFloat(v.percent).toFixed(2) + '%'
                  }
                }
              }
            },
            series: [
              {
                itemStyle: {
                  borderRadius: 10,
                  borderColor: "#fff",
                  borderWidth: 2,
                },
                type: "pie",
                color: ["#5570C7", "#FAC859", "#EE6666", "#91CB74"],
                radius: ["40%", "50%"],
                center: ["50%", "50%"],
                avoidLabelOverlap: false,
                label: {
                  normal: {
                    show: true,
                    position: "center",
                    color: "#4c4a4a",
                    formatter: "{total|" + "总设备数" + "\n\r" + totalAllNum + "}",
                    rich: {
                      total: {
                        fontSize: 12,
                        fontFamily: "微软雅黑",
                        color: "#454c5c",
                      },
                      active: {
                        fontFamily: "微软雅黑",
                        fontSize: 28,
                        color: "#000",
                        lineHeight: 30,
                      },
                    },
                  },
                },
                emphasis: {
                  itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: "rgba(0, 0, 0, 0.5)",
                  },
                },
                labelLine: {
                  show: false,
                },
                data: this.equipment_type,
              },
            ],
          });

        })
      },
      //请求系统版本分布
      RequestSystemVersion() {
        this.loading9 = true
        postFourRequest("xtbbfb00", {
          pageSize: 100,
          pageNum: 1,
          startDate: this.startDate,
          endDate: this.endDate,
          g0equipType: this.equipType,
          g0enterpriseCode: this.value,
        }).then(res => {
          if (!res) {
            return
          }
          this.loading9 = false
          res = JSON.parse(res.data.msg);
          // console.log(res, "请求系统版本分布");
          this.equipment_num = 0
          for (let i = 0; i < this.equipment_arr.length; i++) {
            this.equipment_arr[i].percentage = 0
            this.equipment_arr[i].value = 0
          }

          if (res.total == 0) {
            this.equipment_num = 0
            this.equipment_arr = [
              { value: 0, percentage: 0 }, { value: 0, percentage: 0 }, { value: 0, percentage: 0 }, { value: 0, percentage: 0 }
            ]
          } else {
            for (let i = 0; i < res.data.length; i++) {
              res.data[i].g0osversion = parseFloat(res.data[i].g0osversion)
              this.equipment_num = res.data[0].k0totals
              if (res.data[i].g0osversion < 16 && res.data[i].g0osversion >= 15) {
                this.equipment_arr[0].value += res.data[i].k0num
              } else if (res.data[i].g0osversion < 15 && res.data[i].g0osversion >= 14) {
                this.equipment_arr[1].value += res.data[i].k0num
              } else if (res.data[i].g0osversion < 14 && res.data[i].g0osversion >= 13) {
                this.equipment_arr[2].value += res.data[i].k0num
              } else if (res.data[i].g0osversion < 13) {
                this.equipment_arr[3].value += res.data[i].k0num
              }
            }
            this.equipment_arr[0].percentage = this.equipment_arr[0].value / this.equipment_num * 100
            this.equipment_arr[1].percentage = this.equipment_arr[1].value / this.equipment_num * 100
            this.equipment_arr[2].percentage = this.equipment_arr[2].value / this.equipment_num * 100
            this.equipment_arr[3].percentage = this.equipment_arr[3].value / this.equipment_num * 100
          }
          const arr = [
            { value: this.equipment_arr[0].value, name: `${this.branch}15`, percentage: this.equipment_arr[0].percentage},
            { value: this.equipment_arr[1].value, name: `${this.branch}14`, percentage: this.equipment_arr[1].percentage },
            { value: this.equipment_arr[2].value, name: `${this.branch}13`, percentage: this.equipment_arr[2].percentage},
            { value: this.equipment_arr[3].value, name: `${this.branch}12及以下`, percentage: this.equipment_arr[3].percentage}
          ]
          let chartSixDom = document.getElementById("rightFive");
          this.echartsArr.sixthEcharts = echarts.init(chartSixDom);
          this.echartsArr.sixthEcharts.setOption({
            tooltip: {
              trigger: "item",
            },
            title: {
              text: "系统版本分布",
              left: "left",
              textStyle: {
                color: "#3E3F42",
                fontSize: 18,
                fontWeight: "bold",
              },
            },
            legend: {
              top: 'bottom',
              icon: 'circle',
              itemWidth: 6,
              itemHeight: 6,
              width: this.branch === 'iOS' ? 250 : 300,
              formatter: name => {
                for (const v of arr) {
                  if (v.name === name) {
                    return name + '：' + v.percentage.toFixed(2) + '%'
                  }
                }
              }
            },
            series: [
              {
                color: ["#5570C7", "#FAC859", "#EE6666", "#91CB74"],
                itemStyle: {
                  borderRadius: 10,
                  borderColor: "#fff",
                  borderWidth: 2,
                },
                type: "pie",
                radius: ["40%", "50%"],
                center: ["50%", "50%"],
                avoidLabelOverlap: false,
                label: {
                  show: false,
                  position: "center",
                },
                emphasis: {
                  itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: "rgba(0, 0, 0, 0.5)",
                  },
                },
                label: {
                  normal: {
                    show: true,
                    position: "center",
                    color: "#4c4a4a",
                    formatter: "{total|" + this.branch + "设备数" + "\n\r" + this.equipment_num + "}",
                    rich: {
                      total: {
                        fontSize: 12,
                        fontFamily: "微软雅黑",
                        color: "#454c5c",
                      },
                      active: {
                        fontFamily: "微软雅黑",
                        fontSize: 28,
                        color: "#000",
                        lineHeight: 30,
                      },
                    },
                  },
                },
                data: [
                  { value: this.equipment_arr[0].value, name: `${this.branch}15` },
                  { value: this.equipment_arr[1].value, name: `${this.branch}14`, },
                  { value: this.equipment_arr[2].value, name: `${this.branch}13`, },
                  { value: this.equipment_arr[3].value, name: `${this.branch}12及以下`,},
                ],
              },
            ],
          });
        })
      },
      //页面最大数据尺寸改变调用
      handleSizeChange(val) {
        this.size = val
        this.RequestedVisitsPV()
      },
      //页数改变调用
      handleCurrentChange(val) {
        this.thisPage = val
        this.RequestedVisitsPV()
      },
      //日期选择框
      dateChange() {
        this.isLiTwoSelect = 0
        if (this.timeValue2 == null) {
          this.isLiTwoSelect = 1
          this.startDate2 = this.initstartDate2
          this.endDate2 = this.initendDate2
        } else {
          this.startDate2 = this.timeValue2[0]
          this.endDate2 = this.timeValue2[1]
        }
        this.RequestedVisitsPV()
      },
      // 请求访问量PV
      RequestedVisitsPV() {
        this.loading = true
        postOneId("fwlpvmxb2_qdhzb00", {
          pageSize: this.size,
          pageNum: this.thisPage,
          startDate: this.startDate2,
          endDate: this.endDate2,
          g0enterpriseCode: this.value,
          g0username: this.input3,
          g0moduleName: this.input4,
        }).then(res => {
          if (!res) {
            return
          }
          this.loading = false
          res = JSON.parse(res.data.msg);
          // console.log(res);
          if (res.total) {
            this.tableData = res.data
          } else {
            this.tableData = []
          }
          this.length = res.total
        })
      },
      //下载
      download() {
        if (this.length > 50000) {
          this.$notify.error({
            title: '下载失败',
            message: "下载数据条数不能超过50000条",
          });
          return
        }
        this.loading = true
        getOneIdDownload("fwlpvmxb2_qdhzb00Export", {
          pageSize: this.length,
          pageNum: 1,
          startDate: this.startDate2,
          endDate: this.endDate2,
          g0enterpriseCode: this.value,
          g0username: this.input3,
          g0moduleName: this.input4,
        }).then(res => {
          if (!res) {
            return
          }
          this.loading = false
          let url = window.URL.createObjectURL(res.data)
          let link = document.createElement("a")
          link.style.display = 'none'
          link.href = url
          link.setAttribute('download', '应用访问明细表.xlsx')
          document.body.appendChild(link)
          link.click()
        })
      },
      //补零函数
      ZeroComplement(num) {
        if (num < 10) {
          return "0" + num;
        } else {
          return num;
        }
      }
    },
  });
</script>
<style></style>